<template>
  <div class="history">
    <x-header :left-options="{showBack: true, backText:'历史记录'}"><div class="vux-header-right"></div></x-header>
    <tab active-color="#ff4d4d" class="tabFix">
      <tab-item selected @on-item-click="handlerA">接单</tab-item>
      <tab-item @on-item-click="handlerB">我的</tab-item>
    </tab>
    

    <div class="card-wrap" v-show="isA">

      <scroller lock-x scrollbar-y  ref="scroller" @on-pulldown-loading="pullDown" @on-pullup-loading="pullUp" :use-pulldown=true :use-pullup=true  :pulldown-config="downObj" :pullup-config="upObj">
        <div class="box2">
          <div class="card" v-for="item  in orderList">
            <div class="card-head">
              <div class="head-l"><img :src="item.avatar" alt=""></div>
              <div class="head-r">
                <p class="head-name">{{item.recipient}}</p>
                <small>{{item.paid_at}}</small>
              </div>
            </div>
            <ul class="info-list">
              <li><span></span>取餐点:&nbsp;&nbsp;{{item.canteen_shop}}</li>
              <li><span></span>收货地址:&nbsp;&nbsp;{{item.delivery_address}}</li>
              <li><span></span>送达时间:&nbsp;&nbsp;{{item.appointment_at}}</li>
            </ul>

            <div class="menu-foot">
              <p class="foot-l">本单收入: <span>{{item.fee*100/10000}}元</span></p>
              <p class="foot-r">已送达</p>
            </div>
          </div>
        </div>
      </scroller>

      <Nodata v-if="orderShow"></Nodata>
      
    </div>


    <div v-show="isB">
    <div class="card" v-for="item  in foodList" @click="route(item)">
      <div class="weui-form-preview__item">
          <p class="">{{item.canteen_shop}}</p>{{item.appointment_at}}
          <div class="status">{{item.status}}</div>
      </div>

      <div class="weui-form-preview">
          <div class="weui-form-preview__bd">
              <div class="weui-form-preview__item" v-for="key in item.food_items">
                  <label class="weui-form-preview__label"><span></span>{{key.name}}</label>
                  <span class="weui-form-preview__value">X{{key.quantity}}</span>
              </div>
          </div>
      </div>
      <div class="form-p">共{{item.food_count}}件商品,实付 &nbsp;&nbsp;￥{{item.total}}</div>
    </div>

    <Nodata v-if="foodShow"></Nodata>

  </div>

  </div>
</template>

<script>
import { Tab, TabItem, Sticky, XHeader, Toast, Scroller } from 'vux'
import Nodata from 'components/common/Nodata'

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    XHeader,
    Toast,
    Nodata,
    Scroller
  },
  data () {
    return {
      isA:true,
      isB:false,
      orderList:[],
      foodList:[],
      orderShow:false,
      foodShow:false,
      showList1: true,
      scrollTop: 0,
      takeId:null,
      downObj:{
        content: 'Pull Down To Refresh',
        height: 60,
        autoRefresh: false,
        downContent: '下拉刷新',
        upContent: '释放立即刷新',
        loadingContent: '加载中...',
        clsPrefix: 'xs-plugin-pulldown-'
      },
      upObj:{
        content: 'Pull Up To Refresh',
        pullUpHeight: 80,
        height: 100,
        autoRefresh: false,
        downContent: '上拉加载',
        upContent: '释放立即加载',
        loadingContent: '加载中...',
        clsPrefix: 'xs-plugin-pullup-'
      },
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }

    }
  },
  methods: {
    handlerA:function(){
      this.isA = true,
      this.isB = false;
    },
    handlerB:function(){
      this.isA = false,
      this.isB = true;
    },
    route(item) {
      var id = item.id;
      this.$router.push({path:'/dist/Menudetails',query: { id: id }});
    },
    pullDown() {
      let ajaxUrl = '/api/orders/delivered/me?updown=down&id='+this.takeId;
      this.$http.get(ajaxUrl).then((res) => {
        var data  = res.body.data;
        if(data.length==0){
          this.status.pulldownStatus = 'disabled';
        }else{
          this.orderList.unshift(data);
          for(var i=0;i<data.length;i++){
            console.log(data[i]);
            this.orderList.unshift(data[i]);
          }
          this.takeId = this.orderList[0].id;
        }
        let _this = this; 
        setTimeout(function(){
          _this.$refs.scroller.donePulldown();
        },1000);
      });
    },
    pullUp() {
      let ajaxUrl = '/api/orders/delivered/me?updown=up&limit=10&id='+this.lastId;
      this.$http.get(ajaxUrl).then((res) => {
        let data  = res.body.data;
        if(data.length!=0){
          this.orderList = this.orderList.concat(data);
          this.lastId = this.orderList[this.orderList.length-1].id;
        }else{
          this.status.pullupStatus = 'disabled';
        }
        let _this = this; 
        setTimeout(function(){
          _this.$refs.scroller.donePullup();
        },1000);
      });
    }
  },
  created(){
    let ajaxUrl = '/api/orders/delivered/me?updown=down&id=0&limit=10';
    this.$http.get(ajaxUrl).then((res) => {
      this.orderList = res.body.data;
      if(this.orderList.length==0){
        this.orderShow=true
      }
      this.takeId = this.orderList[0].id;
      this.lastId = this.orderList[res.body.data.length-1].id;
    });

    let ajaxApi = '/api/orders/received/me?updown=down&id=0';
    this.$http.get(ajaxApi).then((res) => {
      this.foodList = res.body.data;
      if(this.foodList.length==0){
        this.foodShow=true
      }
    });
  },
  mounted(){
    
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.history{
  margin-top:92px;
}
.tabFix{
  position: fixed;
  z-index:1002;
  top:46px;
  left:0;
  width:100%;
}
.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.vux-header{
  background-color:#ff4d4d;
}
.menu-foot{
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-between;
  padding-top:0.5rem;
  border-top:1px solid #bababa;
  font-size:18px;
}
.foot-l{
  flex:3;
  padding:0.5rem;
}
.foot-r{
  flex:1;
  background-color:#bababa;
  color:#fff;
  text-align:center;
  border-radius:12px;
  padding:0.5rem;
}
.foot-l span{
  color:#ff4d4d;
  margin-left:8px;
}
.card{
  margin-top:1rem;
  background-color:#fff;
  padding:1rem 2rem;
  font-size:16px;
}
.card ul{
  list-style: none;
}
.card-head{
  display: -webkit-flex; /* Safari */
  display: flex;
  border-bottom:1px solid #bababa;
}
.head-l img{
  width:4rem;
  height:4rem;
  border-radius:50%;
}
.head-name{
  color:#3f3f3f;
}
.head-l{
  flex:1;
}
.head-r{
  flex:5;
}
.info-list li{
  line-height:32px;
}
.vux-tab .vux-tab-item{
  font-size:16px;
  color:#3f3f3f;
}
.info-list li span{
  background-color:#bababa;
  height:16px;
  width:16px;
  border-radius:50%;
  display:inline-block;
  margin:9px 8px 0 0px;
}
.weui-form-preview__item{
  position: relative;
}
.weui-form-preview__item .status{
  position: absolute;
  bottom:0px;
  right:0px;
  font-size:14px;
  color:#969696;
}
.weui-form-preview__item label span{
  background-color:#bababa;
  height:16px;
  width:16px;
  border-radius:50%;
  display:inline-block;
  margin:9px 8px 0 0px;
}
.weui-form-preview .weui-form-preview__bd{
  padding:0px;
}
.form-p{
  padding-top:8px;
  font-size:14px;
  text-align:right;
}
.weui-form-preview__label{
  color:#3f3f3f;
}
</style>